<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态组件</title>
    <style>
			div {
				width: 400px;
			}
			.tab-button {
			  padding: 6px 10px;
			  border-top-left-radius: 3px;
			  border-top-right-radius: 3px;
			  border: solid 1px  #ccc;
			  cursor: pointer;
			  background: #f0f0f0;
			  margin-bottom: -1px;
			  margin-right: -1px;
			}
			.tab-button:hover {
			  background: #e0e0e0;
			}
			.tab-button .active {
			  background: #cdcdcd;
			}
			.tab {
			  border: solid 1px #ccc;
			  padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app">
      <button v-for="tab in tabs"
        :class="['tab-button', {active : tab.title === currentTab}]"
        @click="currentTab = tab.title">
        {{ tab.displayName }}
      </button>
      <keep-alive>
        <component :is="currentTab" class="tab"></component>
      </keep-alive>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
      const introduce = {
        data(){
          return {
            content: 'Java无难事'
          }
        },
        template: '<div><input type="text" v-model="content"></div>'
      }
      const comment = {
        template: '<div>非常经典的一本Java图书</div>'
      }
      const qa = {
        template: '<div>什么时候出版的？</div>'
      }
      Vue.createApp({
        data(){
          return {
            tabs: [
              {title: 'introduce', displayName: '图书介绍'},
              {title: 'comment', displayName: '图书评价'},
              {title: 'qa', displayName: '图书问答'},
            ],
            currentTab: 'introduce'
          }
        },
        components: {
          introduce,
          comment,
          qa
        }
      }).mount('#app')
    </script>
	</body>
</html>

